<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <title>WebXR DOM Overlays Module</title>
<style data-fill-with="stylesheet">/******************************************************************************
 *                   Style sheet for the W3C specifications                   *
 *
 * Special classes handled by this style sheet include:
 *
 * Indices
 *   - .toc for the Table of Contents (<ol class="toc">)
 *     + <span class="secno"> for the section numbers
 *   - #toc for the Table of Contents (<nav id="toc">)
 *   - ul.index for Indices (<a href="#ref">term</a><span>, in §N.M</span>)
 *   - table.index for Index Tables (e.g. for properties or elements)
 *
 * Structural Markup
 *   - table.data for general data tables
 *     -> use 'scope' attribute, <colgroup>, <thead>, and <tbody> for best results !
 *     -> use <table class='complex data'> for extra-complex tables
 *     -> use <td class='long'> for paragraph-length cell content
 *     -> use <td class='pre'> when manual line breaks/indentation would help readability
 *   - dl.switch for switch statements
 *   - ol.algorithm for algorithms (helps to visualize nesting)
 *   - .figure and .caption (HTML4) and figure and figcaption (HTML5)
 *     -> .sidefigure for right-floated figures
 *   - ins/del
 *
 * Code
 *   - pre and code
 *
 * Special Sections
 *   - .note       for informative notes             (div, p, span, aside, details)
 *   - .example    for informative examples          (div, p, pre, span)
 *   - .issue      for issues                        (div, p, span)
 *   - .assertion  for assertions                    (div, p, span)
 *   - .advisement for loud normative statements     (div, p, strong)
 *   - .annoying-warning for spec obsoletion notices (div, aside, details)
 *
 * Definition Boxes
 *   - pre.def   for WebIDL definitions
 *   - table.def for tables that define other entities (e.g. CSS properties)
 *   - dl.def    for definition lists that define other entitles (e.g. HTML elements)
 *
 * Numbering
 *   - .secno for section numbers in .toc and headings (<span class='secno'>3.2</span>)
 *   - .marker for source-inserted example/figure/issue numbers (<span class='marker'>Issue 4</span>)
 *   - ::before styled for CSS-generated issue/example/figure numbers:
 *     -> Documents wishing to use this only need to add
 *        figcaption::before,
 *        .caption::before { content: "Figure "  counter(figure) " ";  }
 *        .example::before { content: "Example " counter(example) " "; }
 *        .issue::before   { content: "Issue "   counter(issue) " ";   }
 *
 * Header Stuff (ignore, just don't conflict with these classes)
 *   - .head for the header
 *   - .copyright for the copyright
 *
 * Miscellaneous
 *   - .overlarge for things that should be as wide as possible, even if
 *     that overflows the body text area. This can be used on an item or
 *     on its container, depending on the effect desired.
 *     Note that this styling basically doesn't help at all when printing,
 *     since A4 paper isn't much wider than the max-width here.
 *     It's better to design things to fit into a narrower measure if possible.
 *   - js-added ToC jump links (see fixup.js)
 *
 ******************************************************************************/

/******************************************************************************/
/*                                   Body                                     */
/******************************************************************************/

	body {
		counter-reset: example figure issue;

		/* Layout */
		max-width: 50em;               /* limit line length to 50em for readability   */
		margin: 0 auto;                /* center text within page                     */
		padding: 1.6em 1.5em 2em 50px; /* assume 16px font size for downlevel clients */
		padding: 1.6em 1.5em 2em calc(26px + 1.5em); /* leave space for status flag     */

		/* Typography */
		line-height: 1.5;
		font-family: sans-serif;
		widows: 2;
		orphans: 2;
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: auto;

		/* Colors */
		color: black;
		background: white top left fixed no-repeat;
		background-size: 25px auto;
	}


/******************************************************************************/
/*                         Front Matter & Navigation                          */
/******************************************************************************/

/** Header ********************************************************************/

	div.head { margin-bottom: 1em }
	div.head hr { border-style: solid; }

	div.head h1 {
		font-weight: bold;
		margin: 0 0 .1em;
		font-size: 220%;
	}

	div.head h2 { margin-bottom: 1.5em;}

/** W3C Logo ******************************************************************/

	.head .logo {
		float: right;
		margin: 0.4rem 0 0.2rem .4rem;
	}

	.head img[src*="logos/W3C"] {
		display: block;
		border: solid #1a5e9a;
		border-width: .65rem .7rem .6rem;
		border-radius: .4rem;
		background: #1a5e9a;
		color: white;
		font-weight: bold;
	}

	.head a:hover > img[src*="logos/W3C"],
	.head a:focus > img[src*="logos/W3C"] {
		opacity: .8;
	}

	.head a:active > img[src*="logos/W3C"] {
		background: #c00;
		border-color: #c00;
	}

	/* see also additional rules in Link Styling section */

/** Copyright *****************************************************************/

	p.copyright,
	p.copyright small { font-size: small }

/** Back to Top / ToC Toggle **************************************************/

	@media print {
		#toc-nav {
			display: none;
		}
	}
	@media not print {
		#toc-nav {
			position: fixed;
			z-index: 2;
			bottom: 0; left: 0;
			margin: 0;
			min-width: 1.33em;
			border-top-right-radius: 2rem;
			box-shadow: 0 0 2px;
			font-size: 1.5em;
			color: black;
		}
		#toc-nav > a {
			display: block;
			white-space: nowrap;

			height: 1.33em;
			padding: .1em 0.3em;
			margin: 0;

			background: white;
			box-shadow: 0 0 2px;
			border: none;
			border-top-right-radius: 1.33em;
			background: white;
		}
		#toc-nav > #toc-jump {
			padding-bottom: 2em;
			margin-bottom: -1.9em;
		}

		#toc-nav > a:hover,
		#toc-nav > a:focus {
			background: #f8f8f8;
		}
		#toc-nav > a:not(:hover):not(:focus) {
			color: #707070;
		}

		/* statusbar gets in the way on keyboard focus; remove once browsers fix */
		#toc-nav > a[href="#toc"]:not(:hover):focus:last-child {
			padding-bottom: 1.5rem;
		}

		#toc-nav:not(:hover) > a:not(:focus) > span + span {
			/* Ideally this uses :focus-within on #toc-nav */
			display: none;
		}
		#toc-nav > a > span + span {
			padding-right: 0.2em;
		}

		#toc-toggle-inline {
			vertical-align: 0.05em;
			font-size: 80%;
			color: gray;
			color: hsla(203,20%,40%,.7);
			border-style: none;
			background: transparent;
			position: relative;
		}
		#toc-toggle-inline:hover:not(:active),
		#toc-toggle-inline:focus:not(:active) {
			text-shadow: 1px 1px silver;
			top: -1px;
			left: -1px;
		}

		#toc-nav :active {
			color: #C00;
		}
	}

/** ToC Sidebar ***************************************************************/

	/* Floating sidebar */
	@media screen {
		body.toc-sidebar #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			max-width: 80%;
			max-width: calc(100% - 2em - 26px);
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body.toc-sidebar #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}
		body.toc-sidebar #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	/* Hide main scroller when only the ToC is visible anyway */
	@media screen and (max-width: 28em) {
		body.toc-sidebar {
			overflow: hidden;
		}
	}

	/* Sidebar with its own space */
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body:not(.toc-inline) #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}

		body:not(.toc-inline) {
			padding-left: 29em;
		}
		/* See also Overflow section at the bottom */

		body:not(.toc-inline) #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) {
			margin: 0 4em;
		}
	}

/******************************************************************************/
/*                                Sectioning                                  */
/******************************************************************************/

/** Headings ******************************************************************/

	h1, h2, h3, h4, h5, h6, dt {
		page-break-after: avoid;
		page-break-inside: avoid;
		font: 100% sans-serif;   /* Reset all font styling to clear out UA styles */
		font-family: inherit;    /* Inherit the font family. */
		line-height: 1.2;        /* Keep wrapped headings compact */
		hyphens: manual;         /* Hyphenated headings look weird */
	}

	h2, h3, h4, h5, h6 {
		margin-top: 3rem;
	}

	h1, h2, h3 {
		color: #005A9C;
		background: transparent;
	}

	h1 { font-size: 170%; }
	h2 { font-size: 140%; }
	h3 { font-size: 120%; }
	h4 { font-weight: bold; }
	h5 { font-style: italic; }
	h6 { font-variant: small-caps; }
	dt { font-weight: bold; }

/** Subheadings ***************************************************************/

	h1 + h2,
	#subtitle {
		/* #subtitle is a subtitle in an H2 under the H1 */
		margin-top: 0;
	}
	h2 + h3,
	h3 + h4,
	h4 + h5,
	h5 + h6 {
		margin-top: 1.2em; /* = 1 x line-height */
	}

/** Section divider ***********************************************************/

	:not(.head) > hr {
		font-size: 1.5em;
		text-align: center;
		margin: 1em auto;
		height: auto;
		border: transparent solid 0;
		background: transparent;
	}
	:not(.head) > hr::before {
		content: "\2727\2003\2003\2727\2003\2003\2727";
	}

/******************************************************************************/
/*                            Paragraphs and Lists                            */
/******************************************************************************/

	p {
		margin: 1em 0;
	}

	dd > p:first-child,
	li > p:first-child {
		margin-top: 0;
	}

	ul, ol {
		margin-left: 0;
		padding-left: 2em;
	}

	li {
		margin: 0.25em 0 0.5em;
		padding: 0;
	}

	dl dd {
		margin: 0 0 .5em 2em;
	}

	.head dd + dd { /* compact for header */
		margin-top: -.5em;
	}

	/* Style for algorithms */
	ol.algorithm ol:not(.algorithm),
	.algorithm > ol ol:not(.algorithm) {
	 border-left: 0.5em solid #DEF;
	}

	/* Put nice boxes around each algorithm. */
	[data-algorithm]:not(.heading) {
	  padding: .5em;
	  border: thin solid #ddd; border-radius: .5em;
	  margin: .5em calc(-0.5em - 1px);
	}
	[data-algorithm]:not(.heading) > :first-child {
	  margin-top: 0;
	}
	[data-algorithm]:not(.heading) > :last-child {
	  margin-bottom: 0;
	}

	/* Style for switch/case <dl>s */
	dl.switch > dd > ol.only,
	dl.switch > dd > .only > ol {
	 margin-left: 0;
	}
	dl.switch > dd > ol.algorithm,
	dl.switch > dd > .algorithm > ol {
	 margin-left: -2em;
	}
	dl.switch {
	 padding-left: 2em;
	}
	dl.switch > dt {
	 text-indent: -1.5em;
	 margin-top: 1em;
	}
	dl.switch > dt + dt {
	 margin-top: 0;
	}
	dl.switch > dt::before {
	 content: '\21AA';
	 padding: 0 0.5em 0 0;
	 display: inline-block;
	 width: 1em;
	 text-align: right;
	 line-height: 0.5em;
	}

/** Terminology Markup ********************************************************/


/******************************************************************************/
/*                                 Inline Markup                              */
/******************************************************************************/

/** Terminology Markup ********************************************************/
	dfn   { /* Defining instance */
		font-weight: bolder;
	}
	a > i { /* Instance of term */
		font-style: normal;
	}
	dt dfn code, code.idl {
		font-size: medium;
	}
	dfn var {
		font-style: normal;
	}

/** Change Marking ************************************************************/

	del { color: red;  text-decoration: line-through; }
	ins { color: #080; text-decoration: underline;    }

/** Miscellaneous improvements to inline formatting ***************************/

	sup {
		vertical-align: super;
		font-size: 80%
	}

/******************************************************************************/
/*                                    Code                                    */
/******************************************************************************/

/** General monospace/pre rules ***********************************************/

	pre, code, samp {
		font-family: Menlo, Consolas, "DejaVu Sans Mono", Monaco, monospace;
		font-size: .9em;
		page-break-inside: avoid;
		hyphens: none;
		text-transform: none;
	}
	pre code,
	code code {
		font-size: 100%;
	}

	pre {
		margin-top: 1em;
		margin-bottom: 1em;
		overflow: auto;
	}

/** Inline Code fragments *****************************************************/

  /* Do something nice. */

/******************************************************************************/
/*                                    Links                                   */
/******************************************************************************/

/** General Hyperlinks ********************************************************/

	/* We hyperlink a lot, so make it less intrusive */
	a[href] {
		color: #034575;
		text-decoration: none;
		border-bottom: 1px solid #707070;
		/* Need a bit of extending for it to look okay */
		padding: 0 1px 0;
		margin: 0 -1px 0;
	}
	a:visited {
		border-bottom-color: #BBB;
	}

	/* Use distinguishing colors when user is interacting with the link */
	a[href]:focus,
	a[href]:hover {
		background: #f8f8f8;
		background: rgba(75%, 75%, 75%, .25);
		border-bottom-width: 3px;
		margin-bottom: -2px;
	}
	a[href]:active {
		color: #C00;
		border-color: #C00;
	}

	/* Backout above styling for W3C logo */
	.head .logo,
	.head .logo a {
		border: none;
		text-decoration: none;
		background: transparent;
	}

/******************************************************************************/
/*                                    Images                                  */
/******************************************************************************/

	img {
		border-style: none;
	}

	/* For autogen numbers, add
	   .caption::before, figcaption::before { content: "Figure " counter(figure) ". "; }
	*/

	figure, .figure, .sidefigure {
		page-break-inside: avoid;
		text-align: center;
		margin: 2.5em 0;
	}
	.figure img,    .sidefigure img,    figure img,
	.figure object, .sidefigure object, figure object {
		max-width: 100%;
		margin: auto;
	}
	.figure pre, .sidefigure pre, figure pre {
		text-align: left;
		display: table;
		margin: 1em auto;
	}
	.figure table, figure table {
		margin: auto;
	}
	@media screen and (min-width: 20em) {
		.sidefigure {
			float: right;
			width: 50%;
			margin: 0 0 0.5em 0.5em
		}
	}
	.caption, figcaption, caption {
		font-style: italic;
		font-size: 90%;
	}
	.caption::before, figcaption::before, figcaption > .marker {
		font-weight: bold;
	}
	.caption, figcaption {
		counter-increment: figure;
	}

	/* DL list is indented 2em, but figure inside it is not */
	dd > .figure, dd > figure { margin-left: -2em }

/******************************************************************************/
/*                             Colored Boxes                                  */
/******************************************************************************/

	.issue, .note, .example, .assertion, .advisement, blockquote {
		padding: .5em;
		border: .5em;
		border-left-style: solid;
		page-break-inside: avoid;
	}
	span.issue, span.note {
		padding: .1em .5em .15em;
		border-right-style: solid;
	}

	.issue,
	.note,
	.example,
	.advisement,
	.assertion,
	blockquote {
		margin: 1em auto;
	}
	.note  > p:first-child,
	.issue > p:first-child,
	blockquote > :first-child {
		margin-top: 0;
	}
	blockquote > :last-child {
		margin-bottom: 0;
	}

/** Blockquotes ***************************************************************/

	blockquote {
		border-color: silver;
	}

/** Open issue ****************************************************************/

	.issue {
		border-color: #E05252;
		background: #FBE9E9;
		counter-increment: issue;
		overflow: auto;
	}
	.issue::before, .issue > .marker {
		text-transform: uppercase;
		color: #AE1E1E;
		padding-right: 1em;
		text-transform: uppercase;
	}
	/* Add .issue::before { content: "Issue " counter(issue) " "; } for autogen numbers,
	   or use class="marker" to mark up the issue number in source. */

/** Example *******************************************************************/

	.example {
		border-color: #E0CB52;
		background: #FCFAEE;
		counter-increment: example;
		overflow: auto;
		clear: both;
	}
	.example::before, .example > .marker {
		text-transform: uppercase;
		color: #827017;
		min-width: 7.5em;
		display: block;
	}
	/* Add .example::before { content: "Example " counter(example) " "; } for autogen numbers,
	   or use class="marker" to mark up the example number in source. */

/** Non-normative Note ********************************************************/

	.note {
		border-color: #52E052;
		background: #E9FBE9;
		overflow: auto;
	}

	.note::before, .note > .marker,
	details.note > summary::before,
	details.note > summary > .marker {
		text-transform: uppercase;
		display: block;
		color: hsl(120, 70%, 30%);
	}
	/* Add .note::before { content: "Note"; } for autogen label,
	   or use class="marker" to mark up the label in source. */

	details.note > summary {
		display: block;
		color: hsl(120, 70%, 30%);
	}
	details.note[open] > summary {
		border-bottom: 1px silver solid;
	}

/** Assertion Box *************************************************************/
	/*  for assertions in algorithms */

	.assertion {
		border-color: #AAA;
		background: #EEE;
	}

/** Advisement Box ************************************************************/
	/*  for attention-grabbing normative statements */

	.advisement {
		border-color: orange;
		border-style: none solid;
		background: #FFEECC;
	}
	strong.advisement {
		display: block;
		text-align: center;
	}
	.advisement > .marker {
		color: #B35F00;
	}

/** Spec Obsoletion Notice ****************************************************/
	/* obnoxious obsoletion notice for older/abandoned specs. */

	details {
		display: block;
	}
	summary {
		font-weight: bolder;
	}

	.annoying-warning:not(details),
	details.annoying-warning:not([open]) > summary,
	details.annoying-warning[open] {
		background: #fdd;
		color: red;
		font-weight: bold;
		padding: .75em 1em;
		border: thick red;
		border-style: solid;
		border-radius: 1em;
	}
	.annoying-warning :last-child {
		margin-bottom: 0;
	}

@media not print {
	details.annoying-warning[open] {
		position: fixed;
		left: 1em;
		right: 1em;
		bottom: 1em;
		z-index: 1000;
	}
}

	details.annoying-warning:not([open]) > summary {
		text-align: center;
	}

/** Entity Definition Boxes ***************************************************/

	.def {
		padding: .5em 1em;
		background: #DEF;
		margin: 1.2em 0;
		border-left: 0.5em solid #8CCBF2;
	}

/******************************************************************************/
/*                                    Tables                                  */
/******************************************************************************/

	th, td {
		text-align: left;
		text-align: start;
	}

/** Property/Descriptor Definition Tables *************************************/

	table.def {
		/* inherits .def box styling, see above */
		width: 100%;
		border-spacing: 0;
	}

	table.def td,
	table.def th {
		padding: 0.5em;
		vertical-align: baseline;
		border-bottom: 1px solid #bbd7e9;
	}

	table.def > tbody > tr:last-child th,
	table.def > tbody > tr:last-child td {
		border-bottom: 0;
	}

	table.def th {
		font-style: italic;
		font-weight: normal;
		padding-left: 1em;
		width: 3em;
	}

	/* For when values are extra-complex and need formatting for readability */
	table td.pre {
		white-space: pre-wrap;
	}

	/* A footnote at the bottom of a def table */
	table.def           td.footnote {
		padding-top: 0.6em;
	}
	table.def           td.footnote::before {
		content: " ";
		display: block;
		height: 0.6em;
		width: 4em;
		border-top: thin solid;
	}

/** Data tables (and properly marked-up index tables) *************************/
	/*
		 <table class="data"> highlights structural relationships in a table
		 when correct markup is used (e.g. thead/tbody, th vs. td, scope attribute)

		 Use class="complex data" for particularly complicated tables --
		 (This will draw more lines: busier, but clearer.)

		 Use class="long" on table cells with paragraph-like contents
		 (This will adjust text alignment accordingly.)
		 Alternately use class="longlastcol" on tables, to have the last column assume "long".
	*/

	table {
		word-wrap: normal;
		overflow-wrap: normal;
		hyphens: manual;
	}

	table.data,
	table.index {
		margin: 1em auto;
		border-collapse: collapse;
		border: hidden;
		width: 100%;
	}
	table.data caption,
	table.index caption {
		max-width: 50em;
		margin: 0 auto 1em;
	}

	table.data td,  table.data th,
	table.index td, table.index th {
		padding: 0.5em 1em;
		border-width: 1px;
		border-color: silver;
		border-top-style: solid;
	}

	table.data thead td:empty {
		padding: 0;
		border: 0;
	}

	table.data  thead,
	table.index thead,
	table.data  tbody,
	table.index tbody {
		border-bottom: 2px solid;
	}

	table.data colgroup,
	table.index colgroup {
		border-left: 2px solid;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		border-right: 2px solid;
		border-top: 1px solid silver;
		padding-right: 1em;
	}

	table.data th[colspan],
	table.data td[colspan] {
		text-align: center;
	}

	table.complex.data th,
	table.complex.data td {
		border: 1px solid silver;
		text-align: center;
	}

	table.data.longlastcol td:last-child,
	table.data td.long {
	 vertical-align: baseline;
	 text-align: left;
	}

	table.data img {
		vertical-align: middle;
	}


/*
Alternate table alignment rules

	table.data,
	table.index {
		text-align: center;
	}

	table.data  thead th[scope="row"],
	table.index thead th[scope="row"] {
		text-align: right;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		text-align: right;
	}

Possible extra rowspan handling

	table.data  tbody th[rowspan]:not([rowspan='1']),
	table.index tbody th[rowspan]:not([rowspan='1']),
	table.data  tbody td[rowspan]:not([rowspan='1']),
	table.index tbody td[rowspan]:not([rowspan='1']) {
		border-left: 1px solid silver;
	}

	table.data  tbody th[rowspan]:first-child,
	table.index tbody th[rowspan]:first-child,
	table.data  tbody td[rowspan]:first-child,
	table.index tbody td[rowspan]:first-child{
		border-left: 0;
		border-right: 1px solid silver;
	}
*/

/******************************************************************************/
/*                                  Indices                                   */
/******************************************************************************/


/** Table of Contents *********************************************************/

	.toc a {
		/* More spacing; use padding to make it part of the click target. */
		padding-top: 0.1rem;
		/* Larger, more consistently-sized click target */
		display: block;
		/* Reverse color scheme */
		color: black;
		border-color: #3980B5;
		border-bottom-width: 3px !important;
		margin-bottom: 0px !important;
	}
	.toc a:visited {
		border-color: #054572;
	}
	.toc a:not(:focus):not(:hover) {
		/* Allow colors to cascade through from link styling */
		border-bottom-color: transparent;
	}

	.toc, .toc ol, .toc ul, .toc li {
		list-style: none; /* Numbers must be inlined into source */
		/* because generated content isn't search/selectable and markers can't do multilevel yet */
		margin:  0;
		padding: 0;
		line-height: 1.1rem; /* consistent spacing */
	}

	/* ToC not indented until third level, but font style & margins show hierarchy */
	.toc > li             { font-weight: bold;   }
	.toc > li li          { font-weight: normal; }
	.toc > li li li       { font-size:   95%;    }
	.toc > li li li li    { font-size:   90%;    }
	.toc > li li li li .secno { font-size: 85%; }
	.toc > li li li li li { font-size:   85%;    }
	.toc > li li li li li .secno { font-size: 100%; }

	/* @supports not (display:grid) { */
		.toc > li             { margin: 1.5rem 0;    }
		.toc > li li          { margin: 0.3rem 0;    }
		.toc > li li li       { margin-left: 2rem;   }

		/* Section numbers in a column of their own */
		.toc .secno {
			float: left;
			width: 4rem;
			white-space: nowrap;
		}

		.toc li {
			clear: both;
		}

		:not(li) > .toc              { margin-left:  5rem; }
		.toc .secno                  { margin-left: -5rem; }
		.toc > li li li .secno       { margin-left: -7rem; }
		.toc > li li li li .secno    { margin-left: -9rem; }
		.toc > li li li li li .secno { margin-left: -11rem; }

		/* Tighten up indentation in narrow ToCs */
		@media (max-width: 30em) {
			:not(li) > .toc              { margin-left:  4rem; }
			.toc .secno                  { margin-left: -4rem; }
			.toc > li li li              { margin-left:  1rem; }
			.toc > li li li .secno       { margin-left: -5rem; }
			.toc > li li li li .secno    { margin-left: -6rem; }
			.toc > li li li li li .secno { margin-left: -7rem; }
		}
	/* } */

	@supports (display:grid) and (display:contents) {
		/* Use #toc over .toc to override non-@supports rules. */
		#toc {
			display: grid;
			align-content: start;
			grid-template-columns: auto 1fr;
			grid-column-gap: 1rem;
			column-gap: 1rem;
			grid-row-gap: .6rem;
			row-gap: .6rem;
		}
		#toc h2 {
			grid-column: 1 / -1;
			margin-bottom: 0;
		}
		#toc ol,
		#toc li,
		#toc a {
			display: contents;
			/* Switch <a> to subgrid when supported */
		}
		#toc span {
			margin: 0;
		}
		#toc > .toc > li > a > span {
			/* The spans of the top-level list,
			   comprising the first items of each top-level section. */
			margin-top: 1.1rem;
		}
		#toc#toc .secno { /* Ugh, need more specificity to override base.css */
			grid-column: 1;
			width: auto;
			margin-left: 0;
		}
		#toc .content {
			grid-column: 2;
			width: auto;
			margin-right: 1rem;
		}
		#toc .content:hover {
			background: rgba(75%, 75%, 75%, .25);
			border-bottom: 3px solid #054572;
			margin-bottom: -3px;
		}
		#toc li li li .content {
			margin-left: 1rem;
		}
		#toc li li li li .content {
			margin-left: 2rem;
		}
	}


/** Index *********************************************************************/

	/* Index Lists: Layout */
	ul.index       { margin-left: 0; columns: 15em; text-indent: 1em hanging; }
	ul.index li    { margin-left: 0; list-style: none; break-inside: avoid; }
	ul.index li li { margin-left: 1em }
	ul.index dl    { margin-top: 0; }
	ul.index dt    { margin: .2em 0 .2em 20px;}
	ul.index dd    { margin: .2em 0 .2em 40px;}
	/* Index Lists: Typography */
	ul.index ul,
	ul.index dl { font-size: smaller; }
	@media not print {
		ul.index li span {
			white-space: nowrap;
			color: transparent; }
		ul.index li a:hover + span,
		ul.index li a:focus + span {
			color: #707070;
		}
	}

/** Index Tables *****************************************************/
	/* See also the data table styling section, which this effectively subclasses */

	table.index {
		font-size: small;
		border-collapse: collapse;
		border-spacing: 0;
		text-align: left;
		margin: 1em 0;
	}

	table.index td,
	table.index th {
		padding: 0.4em;
	}

	table.index tr:hover td:not([rowspan]),
	table.index tr:hover th:not([rowspan]) {
		background: #f7f8f9;
	}

	/* The link in the first column in the property table (formerly a TD) */
	table.index th:first-child a {
		font-weight: bold;
	}

/******************************************************************************/
/*                                    Print                                   */
/******************************************************************************/

	@media print {
		/* Pages have their own margins. */
		html {
			margin: 0;
		}
		/* Serif for print. */
		body {
			font-family: serif;
		}
	}
	@page {
		margin: 1.5cm 1.1cm;
	}

/******************************************************************************/
/*                                    Legacy                                  */
/******************************************************************************/

	/* This rule is inherited from past style sheets. No idea what it's for. */
	.hide { display: none }



/******************************************************************************/
/*                             Overflow Control                               */
/******************************************************************************/

	.figure .caption, .sidefigure .caption, figcaption {
		/* in case figure is overlarge, limit caption to 50em */
		max-width: 50rem;
		margin-left: auto;
		margin-right: auto;
	}
	.overlarge {
		/* Magic to create good table positioning:
		   "content column" is 50ems wide at max; less on smaller screens.
		   Extra space (after ToC + content) is empty on the right.

		   1. When table < content column, centers table in column.
		   2. When content < table < available, left-aligns.
		   3. When table > available, fills available + scroll bar.
		*/ 
		display: grid;
		grid-template-columns: minmax(0, 50em);
	}
	.overlarge > table {
		/* limit preferred width of table */
		max-width: 50em;
		margin-left: auto;
		margin-right: auto;
	}

	@media (min-width: 55em) {
		.overlarge {
			margin-right: calc(13px + 26.5rem - 50vw);
			max-width: none;
		}
	}
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) .overlarge {
			/* 30.5em body padding 50em content area */
			margin-right: calc(40em - 50vw) !important;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) .overlarge {
			/* 4em html margin 30.5em body padding 50em content area */
			margin-right: calc(84.5em - 100vw) !important;
		}
	}

	@media not print {
		.overlarge {
			overflow-x: auto;
			/* See Lea Verou's explanation background-attachment:
			 * http://lea.verou.me/2012/04/background-attachment-local/
			 *
			background: top left  / 4em 100% linear-gradient(to right,  #ffffff, rgba(255, 255, 255, 0)) local,
			            top right / 4em 100% linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0)) local,
			            top left  / 1em 100% linear-gradient(to right,  #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            top right / 1em 100% linear-gradient(to left, #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            white;
			background-repeat: no-repeat;
			*/
		}
	}
</style>
  <link href="https://www.w3.org/StyleSheets/TR/2016/cg-draft" rel="stylesheet" type="text/css">
  <link href="https://immersive-web.github.io/dom-overlays/" rel="canonical">
  <link href="favicon-32x32.png" rel="icon" sizes="32x32" type="image/png">
  <link href="favicon-96x96.png" rel="icon" sizes="96x96" type="image/png">
<style>
  .unstable::before {
    content: "This section is not stable";
    display: block;
    font-weight: bold;
    text-align: right;
    color: red;
  }
  .unstable {
    border: thin solid pink;
    border-radius: .5em;
    padding: .5em;
    margin: .5em calc(-0.5em - 1px);
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='290'><text transform='rotate(-45)' text-anchor='middle' font-family='sans-serif' font-weight='bold' font-size='70' y='210' opacity='.1'>Unstable</text></svg>");
    background-repeat: repeat;
    background-color: #FFF4F4;
  }
  .unstable h3:first-of-type {
    margin-top: 0.5rem;
  }

  .unstable.example:not(.no-marker)::before {
    content: "Example " counter(example) " (Unstable)";
    float: none;
  }

  .non-normative::before {
    content: "This section is non-normative.";
    font-style: italic;
  }
  .tg {
    border-collapse: collapse;
    border-spacing: 0;
  }
  .tg th {
    border-style: solid;
    border-width: 1px;
    background: #90b8de;
    color: #fff;
    font-family: sans-serif;
    font-weight: bold;
    border-color: grey;
  }
  .tg td {
    padding: 4px 5px;
    background-color: rgb(221, 238, 255);
    font-family: monospace;
    border-style: solid;
    border-width: 1px;
    border-color: grey;
    overflow: hidden;
    word-break: normal;
  }
</style>
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">WebXR DOM Overlays Module</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Draft Community Group Report, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://immersive-web.github.io/dom-overlays/">https://immersive-web.github.io/dom-overlays/</a>
     <dt class="editor">Editors:
     <dd class="editor p-author h-card vcard" data-editor-id="113597"><a class="p-name fn u-email email" href="mailto:klausw@google.com">Klaus Weidner</a> (<a class="p-org org" href="http://google.com/">Google</a>)
     <dd class="editor p-author h-card vcard"><span class="p-name fn"></span>
     <dt>Participate:
     <dd><a href="https://github.com/immersive-web/dom-overlays/issues/new">File an issue</a> (<a href="https://github.com/immersive-web/dom-overlays/issues">open issues</a>)
     <dd><a href="https://lists.w3.org/Archives/Public/public-immersive-web/">Mailing list archive</a>
     <dd><a href="irc://irc.w3.org:6665/">W3C’s #immersive-web IRC</a>
     <dd>
    </dl>
   </div>
   <div data-fill-with="warning">
    <details class="annoying-warning" open>
     <summary>Unstable API</summary>
     <p><b>The API represented in this document is under development and may change at any time.</b></p>
     <p>For additional context on the use of this API please reference the <a href="https://github.com/immersive-web/dom-overlays/blob/master/explainer.md">WebXR DOM Overlays Module Explainer</a>.</p>
    </details>
   </div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document" rel="license">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>The WebXR Augmented Reality module expands the <a href="https://www.w3.org/TR/webxr/">WebXR Device API</a> with the functionality available on AR hardware.</p>
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li>
     <a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a>
     <ol class="toc">
      <li><a href="#overview"><span class="secno">1.1</span> <span class="content">Overview</span></a>
     </ol>
    <li>
     <a href="#html-api-integration"><span class="secno">2</span> <span class="content">HTML API Integration</span></a>
     <ol class="toc">
      <li><a href="#onbeforexrselect"><span class="secno">2.1</span> <span class="content">onbeforexrselect</span></a>
     </ol>
    <li>
     <a href="#webxr-device-api-integration"><span class="secno">3</span> <span class="content">WebXR Device API Integration</span></a>
     <ol class="toc">
      <li><a href="#xrsessioninit"><span class="secno">3.1</span> <span class="content">XRSessionInit</span></a>
      <li><a href="#xrsession"><span class="secno">3.2</span> <span class="content">XRSession</span></a>
      <li><a href="#xrinputsource"><span class="secno">3.3</span> <span class="content">XRInputSource</span></a>
     </ol>
    <li><a href="#initialization"><span class="secno">4</span> <span class="content">Initialization</span></a>
    <li><a href="#cross-origin-content-events"><span class="secno">5</span> <span class="content">Event handling for cross-origin content</span></a>
    <li>
     <a href="#security"><span class="secno">6</span> <span class="content">Security, Privacy, and Comfort Considerations</span></a>
     <ol class="toc">
      <li><a href="#protected-functionality"><span class="secno">6.1</span> <span class="content">Protected functionality</span></a>
     </ol>
    <li><a href="#ack"><span class="secno">7</span> <span class="content">Acknowledgements</span></a>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
     </ol>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#intro"></a></h2>
   <section class="non-normative">
    <p>This module describes a mechanism for showing interactive 2D web content during an immersive WebXR session. When the feature is enabled, the user agent will display the content of a single DOM element as a transparent-background 2D rectangle.</p>
   </section>
   <h3 class="heading settled" data-level="1.1" id="overview"><span class="secno">1.1. </span><span class="content">Overview</span><a class="self-link" href="#overview"></a></h3>
   <section class="non-normative">
    <p>While the DOM overlay is active, the UA enables user interactions with the DOM overlay’s content using platform-appropriate mechanisms. For example, when using XR controllers, the <a data-link-type="dfn">primary action</a> dispatches DOM pointer events and click events at the location where the controller’s pointing ray intersects the DOM overlay.</p>
    <p>A new <a data-link-type="dfn" href="#beforexrselect" id="ref-for-beforexrselect">beforexrselect</a> event provides a way to suppress XR input events for specific regions of the DOM overlay and helps applications distinguish DOM UI interactions from XR world interactions.</p>
   </section>
   <h2 class="heading settled" data-level="2" id="html-api-integration"><span class="secno">2. </span><span class="content">HTML API Integration</span><a class="self-link" href="#html-api-integration"></a></h2>
   <p>This module adds a new event type to the definition of <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/webappapis.html#globaleventhandlers" id="ref-for-globaleventhandlers">GlobalEventHandlers</a></code>.</p>
   <h3 class="heading settled" data-level="2.1" id="onbeforexrselect"><span class="secno">2.1. </span><span class="content">onbeforexrselect</span><a class="self-link" href="#onbeforexrselect"></a></h3>
   <p>An <code class="idl"><a data-link-type="idl">XRSessionEvent</a></code> of type <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="beforexrselect">beforexrselect</dfn> is dispatched on the DOM overlay element before generating a WebXR <code class="idl"><a data-link-type="idl">selectstart</a></code> input event if the input source’s <code class="idl"><a data-link-type="idl">targetRaySpace</a></code> intersects the DOM overlay element at the time the input device’s <a data-link-type="dfn">primary action</a> is triggered.</p>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <c- b>mixin</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/webappapis.html#globaleventhandlers" id="ref-for-globaleventhandlers①"><c- g>GlobalEventHandlers</c-></a> {
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler"><c- n>EventHandler</c-></a> <dfn class="idl-code" data-dfn-for="GlobalEventHandlers" data-dfn-type="attribute" data-export data-type="EventHandler" id="dom-globaleventhandlers-onbeforexrselect"><code><c- g>onbeforexrselect</c-></code><a class="self-link" href="#dom-globaleventhandlers-onbeforexrselect"></a></dfn>;
};
</pre>
   <p>This event is an <code class="idl"><a data-link-type="idl">XRSessionEvent</a></code> with type <a data-link-type="dfn" href="#beforexrselect" id="ref-for-beforexrselect①">beforexrselect</a> that bubbles, is cancelable, and is composed. Its <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-target" id="ref-for-dom-event-target">target</a></code> element is the <a data-link-type="dfn" href="https://w3c.github.io/uievents/#topmost-event-target" id="ref-for-topmost-event-target">topmost event target</a> being intersected by the <code class="idl"><a data-link-type="idl">targetRaySpace</a></code> and is either a descendant of the DOM overlay element or the DOM overlay element itself.</p>
   <p>Cancelling this event by calling <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-preventdefault" id="ref-for-dom-event-preventdefault">preventDefault()</a></code> suppresses default WebXR input events that would normally be generated by the input source for this <a data-link-type="dfn">primary action</a>. The <code class="idl"><a data-link-type="idl">selectstart</a></code>, <code class="idl"><a data-link-type="idl">selectend</a></code>, and <code class="idl"><a data-link-type="idl">select</a></code> events will not be fired for this interaction sequence.</p>
   <p class="note" role="note"><span>Note:</span> Future WebXR modules MAY define additional events or WebXR input dependent data that are affected by cancelling this event, for example suppressing results from a transient input source’s hit test subscription.</p>
   <p>This event and the actions taken by the event handler have no effect on DOM event processing, and are not synchronized with DOM event dispatch. The user’s action will separately generate appropriate DOM events such as `"pointerdown"`, and those DOM events can happen before or after the corresponding <a data-link-type="dfn" href="#beforexrselect" id="ref-for-beforexrselect②">beforexrselect</a> event. This happens regardless of whether the <a data-link-type="dfn" href="#beforexrselect" id="ref-for-beforexrselect③">beforexrselect</a> event was cancelled or not, and is independent of any further actions taken in XR input event handlers.</p>
   <p class="note" role="note"><span>Note:</span> This event provides a way for applications to suppress duplicate XR input events while the user is interacting with a DOM UI. Since this is a bubbling event, the application can register handlers on appropriate container elements, effectively marking regions of the DOM overlay as blocking XR input. This is independent of the visual opacity of DOM elements. It is possible to show noninteractive opaque or translucent DOM content such as text explanations that don’t block XR input events.</p>
   <div class="example" id="example-718ea324">
    <a class="self-link" href="#example-718ea324"></a> The following code installs an event handler on an interactive part of the DOM overlay to selectively suppress XR events for that region, while continuing to generate XR events for other parts of the DOM overlay that are treated as transparent for interaction purposes. 
<pre class="highlight">document<c- p>.</c->getElementById<c- p>(</c-><c- t>'button-container'</c-><c- p>).</c->addEventListener<c- p>(</c->
  <c- t>'beforexrselect'</c-><c- p>,</c-> ev <c- p>=></c-> ev<c- p>.</c->preventDefault<c- p>());</c->
</pre>
   </div>
   <h2 class="heading settled" data-level="3" id="webxr-device-api-integration"><span class="secno">3. </span><span class="content">WebXR Device API Integration</span><a class="self-link" href="#webxr-device-api-integration"></a></h2>
   <p>This module expands the definitions of <code class="idl"><a data-link-type="idl">XRSessionInit</a></code> and <code class="idl"><a data-link-type="idl">XRSession</a></code>, and modifies the behavior of <code class="idl"><a data-link-type="idl">XRInputSource</a></code> events.</p>
   <h3 class="heading settled" data-level="3.1" id="xrsessioninit"><span class="secno">3.1. </span><span class="content">XRSessionInit</span><a class="self-link" href="#xrsessioninit"></a></h3>
   <p>This module introduces the string <dfn class="dfn-paneled" data-dfn-for="feature descriptor" data-dfn-type="dfn" data-noexport id="feature-descriptor-dom-overlay">dom-overlay</dfn> as a new valid <a data-link-type="dfn">feature descriptor</a> for use in the <code class="idl"><a data-link-type="idl">requiredFeatures</a></code> or <code class="idl"><a data-link-type="idl">optionalFeatures</a></code> sequences for <a data-link-type="dfn">immersive sessions</a>.</p>
   <p>A device is <a data-link-type="dfn">capable of supporting</a> the DOM overlay feature if it provides a way for the user to see and interact with DOM content for the duration of the immersive session.</p>
   <p class="note" role="note"><span>NOTE:</span> Implementation choices include a fullscreen overlay on a handheld AR device, or a floating rectangle in space for a VR or AR headset.</p>
   <p>The DOM content MUST be composited as if it were the topmost content layer. It MUST NOT be occluded by content from the <code class="idl"><a data-link-type="idl">XRWebGLLayer</a></code> or by images from a passthrough camera for an AR device.  Applications can use normal CSS rules to control transparency and 2D placement of content within the DOM overlay itself.</p>
   <p>The DOM overlay MUST be automatically visible to the user from the start of the session, without requiring the user to press buttons or take other manual actions to make it visible.</p>
   <p class="note" role="note"><span>NOTE:</span> A device should not claim to support a DOM overlay if the content element is only indirectly visible, for example if the user would need to take off their headset or manually enable a passthrough camera to view content on a separate 2D monitor that’s not normally visible during the session. However, an immersive CAVE system where a user is carrying a physical touchscreen device showing the DOM overlay content would be a valid implementation.</p>
   <p>The XRSessionInit dictionary is expanded by adding a new <code class="idl"><a data-link-type="idl" href="#dom-xrsessioninit-domoverlay" id="ref-for-dom-xrsessioninit-domoverlay">domOverlay</a></code> member. This is an optional member of <code class="idl"><a data-link-type="idl">XRSessionInit</a></code>, but it MUST be specified when using the DOM overlay feature since there is no default overlay element.</p>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>dictionary</c-> <a class="idl-code" data-link-type="dictionary"><c- g>XRSessionInit</c-></a> {
  <a class="n" data-link-type="idl-name" href="#dictdef-xrdomoverlayinit" id="ref-for-dictdef-xrdomoverlayinit"><c- n>XRDOMOverlayInit</c-></a>? <dfn class="dfn-paneled idl-code" data-dfn-for="XRSessionInit" data-dfn-type="dict-member" data-export data-type="XRDOMOverlayInit? " id="dom-xrsessioninit-domoverlay"><code><c- g>domOverlay</c-></code></dfn>;
};
</pre>
   <p>If the DOM overlay feature is a required feature but the application did not supply a <code class="idl"><a data-link-type="idl" href="#dom-xrsessioninit-domoverlay" id="ref-for-dom-xrsessioninit-domoverlay①">domOverlay</a></code> member, the UA MUST treat this as an unresolved required feature and reject the <code class="idl"><a data-link-type="idl">requestSession()</a></code> promise with a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#notsupportederror" id="ref-for-notsupportederror">NotSupportedError</a></code>. If it was requested as an optional feature, the UA MUST ignore the feature request and not enable a DOM overlay.</p>
   <p class="note" role="note"><span>NOTE:</span> The UA MAY emit local warnings such as developer console messages explaining why the DOM overlay was not enabled.</p>
   <h3 class="heading settled" data-level="3.2" id="xrsession"><span class="secno">3.2. </span><span class="content">XRSession</span><a class="self-link" href="#xrsession"></a></h3>
   <p>This module extends the XRSession interface to add a new readonly attribute which reflects the current state of the active DOM overlay element.</p>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface"><c- g>XRSession</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#dictdef-xrdomoverlaystate" id="ref-for-dictdef-xrdomoverlaystate"><c- n>XRDOMOverlayState</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="XRDOMOverlayState?" href="#dom-xrsession-domoverlaystate" id="ref-for-dom-xrsession-domoverlaystate"><c- g>domOverlayState</c-></a>;
};
</pre>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="XRSession" data-dfn-type="attribute" data-export id="dom-xrsession-domoverlaystate"><code>domOverlayState</code></dfn> attribute MUST be null if the <a data-link-type="dfn" href="#feature-descriptor-dom-overlay" id="ref-for-feature-descriptor-dom-overlay">dom-overlay</a> feature is not supported or not enabled.</p>
   <p>If the feature is enabled, the attribute value MUST be present.</p>
   <p class="note" role="note"><span>NOTE:</span> Applications can check the presence <code class="idl"><a data-link-type="idl" href="#dom-xrsession-domoverlaystate" id="ref-for-dom-xrsession-domoverlaystate①">domOverlayState</a></code> to verify that the DOM overlay feature is enabled and working, for example if it was requested as an optional feature.</p>
   <p class="note" role="note"><span>NOTE:</span> The DOM overlay may be temporarily invisible to the user, for example if the user agent places it at a fixed orientation or location where it may end up outside the user’s field of view after user movement. The <code class="idl"><a data-link-type="idl" href="#dom-xrsession-domoverlaystate" id="ref-for-dom-xrsession-domoverlaystate②">domOverlayState</a></code> attribute still remains set while this is happening.</p>
   <p>While the session is active with a visible DOM overlay, the UA MUST treat this as <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#rendering-opportunity" id="ref-for-rendering-opportunity">rendering opportunity</a> and execute <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window">Window</a></code> <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-animationframeprovider-requestanimationframe" id="ref-for-dom-animationframeprovider-requestanimationframe">requestAnimationFrame()</a></code> callbacks at a rate suitable for animating DOM content. These MAY run at different times and frequencies than <code class="idl"><a data-link-type="idl">requestAnimationFrame()</a></code> callbacks as used for drawing <code class="idl"><a data-link-type="idl">XRWebGLLayer</a></code> content.</p>
   <h3 class="heading settled" data-level="3.3" id="xrinputsource"><span class="secno">3.3. </span><span class="content">XRInputSource</span><a class="self-link" href="#xrinputsource"></a></h3>
   <p>When an <code class="idl"><a data-link-type="idl">XRInputSource</a></code> begins the platform-specific action corresponding as its <a data-link-type="dfn">primary action</a> the UA MUST run the following steps before starting input processing to decide if this is treated as a <a data-link-type="dfn">primary action</a>:</p>
   <div class="algorithm" data-algorithm="on-before-input-start">
    <ol>
     <li data-md>
      <p>If the input source’s <code class="idl"><a data-link-type="idl">targetRaySpace</a></code> intersects the DOM overlay at the time the input device’s <a data-link-type="dfn">primary action</a> is triggered:</p>
      <ol>
       <li data-md>
        <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task">Queue a task</a> to <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-fire" id="ref-for-concept-event-fire">fire</a> an <code class="idl"><a data-link-type="idl">XRSessionEvent</a></code> named <a data-link-type="dfn" href="#beforexrselect" id="ref-for-beforexrselect④">beforexrselect</a> on the <a data-link-type="dfn" href="https://w3c.github.io/uievents/#topmost-event-target" id="ref-for-topmost-event-target①">topmost event target</a> within the DOM overlay <code class="idl"><a data-link-type="idl" href="#dom-xrdomoverlayinit-root" id="ref-for-dom-xrdomoverlayinit-root">root</a></code> being intersected by the <code class="idl"><a data-link-type="idl">targetRaySpace</a></code>, setting <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-target" id="ref-for-dom-event-target①">target</a></code> to that element. This events bubbles, is cancelable, and is composed.</p>
       <li data-md>
        <p>Check how XR input should be handled as follows:</p>
        <dl class="switch">
         <dt>If the event was cancelled
         <dd>
          <ol>
           <li data-md>
            <p>If the input source is a <a data-link-type="dfn">transient input source</a>, treat this as an <a data-link-type="dfn">auxiliary action</a>. Otherwise, ignore this action for the purpose of generating XR input events.</p>
          </ol>
         <dt>Otherwise
         <dd>Treat the action as a <a data-link-type="dfn">primary action</a> as usual for the input source.
        </dl>
      </ol>
    </ol>
   </div>
   <p class="note" role="note"><span>NOTE:</span> Effectively, cancelling the <a data-link-type="dfn" href="#beforexrselect" id="ref-for-beforexrselect⑤">beforexrselect</a> event suppresses XR input select events, none of <code class="idl"><a data-link-type="idl">selectstart</a></code>, <code class="idl"><a data-link-type="idl">selectend</a></code>, or <code class="idl"><a data-link-type="idl">select</a></code> are generated for this action. For transient input sources, <code class="idl"><a data-link-type="idl">inputsourceschange</a></code> events are still generated, but cancelling the <a data-link-type="dfn" href="#beforexrselect" id="ref-for-beforexrselect⑥">beforexrselect</a> event causes the action to be treated as an <a data-link-type="dfn">auxiliary action</a>, similar to a secondary finger input.</p>
   <h2 class="heading settled" data-level="4" id="initialization"><span class="secno">4. </span><span class="content">Initialization</span><a class="self-link" href="#initialization"></a></h2>
   <p>The application MUST provide configuration for the DOM overlay through the <code class="idl"><a data-link-type="idl" href="#dom-xrsessioninit-domoverlay" id="ref-for-dom-xrsessioninit-domoverlay②">domOverlay</a></code> dictionary.</p>
<pre class="idl highlight def"><c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-xrdomoverlayinit"><code><c- g>XRDOMOverlayInit</c-></code></dfn> {
  <c- b>required</c-> <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element"><c- n>Element</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="Element " href="#dom-xrdomoverlayinit-root" id="ref-for-dom-xrdomoverlayinit-root①"><c- g>root</c-></a>;
};
</pre>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="XRDOMOverlayInit" data-dfn-type="dict-member" data-export id="dom-xrdomoverlayinit-root"><code>root</code></dfn> attribute specifies the DOM element that will be displayed to the user as the content of the DOM overlay. This is a required attribute, there is no default.</p>
   <div class="example" id="example-0729bd83">
    <a class="self-link" href="#example-0729bd83"></a> The following code requests DOM overlay as an optional feature. 
<pre class="highlight"><c- a>let</c-> uiElement <c- o>=</c-> document<c- p>.</c->getElementById<c- p>(</c-><c- t>'ui'</c-><c- p>);</c->
navigator<c- p>.</c->xr<c- p>.</c->requestSession<c- p>(</c-><c- t>'immersive-ar'</c-><c- p>,</c-> <c- p>{</c->
    optionalFeatures<c- o>:</c-> <c- p>[</c-><c- t>'dom-overlay'</c-><c- p>],</c->
    domOverlay<c- o>:</c-> <c- p>{</c-> root<c- o>:</c-> uiElement <c- p>}</c-> <c- p>}).</c->then<c- p>((</c->session<c- p>)</c-> <c- p>=></c-> <c- p>{</c->
    <c- c1>// session.domOverlayState.type is now set if supported,</c->
    <c- c1>// or is null if the feature is not supported.</c->
  <c- p>}</c->
<c- p>}</c->
</pre>
   </div>
   <p>While active, the DOM overlay element is automatically resized to fill the dimensions of the UA-provided DOM overlay rectangle. Its background color is automatically styled as transparent for the duration of the session.</p>
   <p class="note" role="note"><span>NOTE:</span> A UA MAY use the <a href="https://fullscreen.spec.whatwg.org/#user-agent-level-style-sheet-defaults">Fullscreen API §5.4 User-agent level style sheet defaults</a> to style the DOM overlay element, with an additional rule containing <code>background-color: rgba(0,0,0,0) !important;</code> to set the background transparent.</p>
   <p>Once the session is active, the <code class="idl"><a data-link-type="idl" href="#dom-xrsession-domoverlaystate" id="ref-for-dom-xrsession-domoverlaystate③">domOverlayState</a></code> attribute provides information about the DOM overlay.</p>
<pre class="idl highlight def"><c- b>enum</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="enum" data-export id="enumdef-xrdomoverlaytype"><code><c- g>XRDOMOverlayType</c-></code></dfn> {
  <a class="idl-code" data-link-type="enum-value" href="#dom-xrdomoverlaytype-screen" id="ref-for-dom-xrdomoverlaytype-screen"><c- s>"screen"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-xrdomoverlaytype-floating" id="ref-for-dom-xrdomoverlaytype-floating"><c- s>"floating"</c-></a>
};

<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-xrdomoverlaystate"><code><c- g>XRDOMOverlayState</c-></code></dfn> {
  <a class="n" data-link-type="idl-name" href="#enumdef-xrdomoverlaytype" id="ref-for-enumdef-xrdomoverlaytype"><c- n>XRDOMOverlayType</c-></a> <dfn class="idl-code" data-dfn-for="XRDOMOverlayState" data-dfn-type="dict-member" data-export data-type="XRDOMOverlayType " id="dom-xrdomoverlaystate-type"><code><c- g>type</c-></code><a class="self-link" href="#dom-xrdomoverlaystate-type"></a></dfn>; 
};
</pre>
   <ul>
    <li data-md>
     <p>An overlay type of <dfn class="dfn-paneled idl-code" data-dfn-for="XRDOMOverlayType" data-dfn-type="enum-value" data-export data-lt="&quot;screen&quot;|screen" id="dom-xrdomoverlaytype-screen"><code>screen</code></dfn> indicates that the DOM overlay element covers the entire physical screen for a screen-based device, for example handheld AR. Its visual extent MUST match the visual extent of the <code class="idl"><a data-link-type="idl">XRViewport</a></code>(s) used for <code class="idl"><a data-link-type="idl">XRWebGLLayer</a></code> rendering. For a monoscopic display, this is a single viewport. A steroscopic display screen would provide two viewports, in that case the DOM overlay MUST be rendered at the Z position matching the physical screen location, appearing identically in both eye views.</p>
    <li data-md>
     <p>An overlay type of <dfn class="dfn-paneled idl-code" data-dfn-for="XRDOMOverlayType" data-dfn-type="enum-value" data-export data-lt="&quot;floating&quot;|floating" id="dom-xrdomoverlaytype-floating"><code>floating</code></dfn> indicates that the DOM overlay appears as a floating rectangle in space. The initial location of this rectangle in world space is up to the UA, and the UA MAY move it during the session to keep it in view, or support user-initiated manual placement.</p>
   </ul>
   <p class="note" role="note"><span>NOTE:</span> Future versions of this spec may add additional attributes to the overlay state, for example the current location in world space for a floating overlay, or additional modes such as head-locked.</p>
   <h2 class="heading settled" data-level="5" id="cross-origin-content-events"><span class="secno">5. </span><span class="content">Event handling for cross-origin content</span><a class="self-link" href="#cross-origin-content-events"></a></h2>
   <p>The user agent MUST NOT provide poses or gamepad input state for user interactions with cross-origin content such as an <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#htmliframeelement" id="ref-for-htmliframeelement">HTMLIFrameElement</a></code> nested within the DOM overlay element.</p>
   <p>A user agent MAY meet this requirement by preventing user interactions with
cross-origin content, for example by blocking DOM events that would normally be
received by that content, or by not loading and displaying cross-origin content at
all.</p>
   <p>If the user agent supports interactions with cross-origin content in the DOM overlay, and if an input source’s <code class="idl"><a data-link-type="idl">targetRaySpace</a></code> intersects cross-origin content as the <a data-link-type="dfn" href="https://w3c.github.io/uievents/#topmost-event-target" id="ref-for-topmost-event-target②">topmost event target</a>, the UA MUST enable <a href="https://www.w3.org/TR/webxr/#limiting-header">WebXR Device API §limiting-header</a> data adjustment, and <a data-link-type="dfn">populate the pose</a> for <code class="idl"><a data-link-type="idl">XRSpace</a></code>s associated with that input source accordingly treating the <code>limit</code> boolean as true. In addition, the UA MUST NOT update gamepad data for this input source while poses are limited.</p>
   <p class="note" role="note"><span>NOTE:</span> The application does not receive pose updates for the controller or its targeting ray while poses are limited in this way. The UA is responsible for drawing a pointer ray or other appropriate visualization as needed to enable interactions.</p>
   <p class="note" role="note"><span>NOTE:</span> the restriction on updating gamepad data is intended to avoid information leakage from interactions with the cross-origin content to the application. For example, if an input source’s <a data-link-type="dfn">primary action</a> uses an analog trigger where the primary action happens at a certain trigger threshold, the application could infer when the user started and ended a primary action from the trigger value even if the corresponding events are blocked. Another example would be a device that uses a trackpad or joystick for text input in DOM content, where reading the axis values would allow the application to infer what text was being entered.</p>
   <p>If a <a data-link-type="dfn">primary action</a> ends inside cross-origin content, the UA MUST treat the <a data-link-type="dfn">primary action</a> as cancelled, and MUST NOT send a <code class="idl"><a data-link-type="idl">select</a></code> event. The UA MUST send the <code class="idl"><a data-link-type="idl">selectend</a></code> event using the last available pose before entering the cross-origin content due to treating poses as limited.</p>
   <p>If the input is a <a data-link-type="dfn">transient input source</a>, and if the <a data-link-type="dfn">transient action</a> begins inside cross-origin content, the user agent MUST delay <a data-link-type="dfn">adding the input source</a> until the input location moves out of the cross-origin content. If the <a data-link-type="dfn">transient action</a> ends while still inside the cross-origin content, the transient input source does not get added at all.</p>
   <p class="note" role="note"><span>NOTE:</span> On a handheld AR device using <code class="idl"><a data-link-type="idl" href="#dom-xrdomoverlaytype-screen" id="ref-for-dom-xrdomoverlaytype-screen①">screen</a></code>-mode input, this means that touches that stay inside cross-origin content don’t create an input source or associated XR input events. If a drag movement starts inside cross-origin content, the input source is created at the location where the touch location leaves the cross-origin content, emitting a cancelable <a data-link-type="dfn" href="#beforexrselect" id="ref-for-beforexrselect⑦">beforexrselect</a> event as usual.</p>
   <h2 class="heading settled" data-level="6" id="security"><span class="secno">6. </span><span class="content">Security, Privacy, and Comfort Considerations</span><a class="self-link" href="#security"></a></h2>
   <h3 class="heading settled" data-level="6.1" id="protected-functionality"><span class="secno">6.1. </span><span class="content">Protected functionality</span><a class="self-link" href="#protected-functionality"></a></h3>
   <p>The DOM overlay does not in itself introduce any new sensitive information. However, since it combines existing technologies, it’s important to ensure that this combination does not lead to any unexpected interactions.</p>
   <p>A primary design goal for this module was that the DOM overlay should follow existing semantics for 2D content where possible. Specifically, the information flows related to cross-origin embedded content should be similar to using iframes on a 2D page. For example, a 2D page can embed cross-origin content in an iframe, and then cover this iframe with a transparent element. In that case, the page will continue to receive mouse movement information, but the cross-origin content does not receive any input events in the covered area. For a DOM overlay, XR input event data is treated as similar to mouse movement data. Poses remain available to the outer page if there is no cross-origin content, or if the cross-origin content is not receiving input, but are limited (blocked) when interacting with cross-origin content.</p>
   <p>Cross-origin content is potentially vulnerable to <a href="https://www.w3.org/Security/wiki/Clickjacking_Threats">clickjacking threats</a>. The UA MUST continue to apply mitigations such as <a href="https://www.w3.org/TR/CSP3/#directive-frame-src">Content Security Policy §6.1.5 frame-src</a> when iframes are used in a DOM overlay. The UA MAY implement additional restrictions specifically for cross-origin content in a DOM overlay if necessary to address specific threats.</p>
   <h2 class="heading settled" data-level="7" id="ack"><span class="secno">7. </span><span class="content">Acknowledgements</span><a class="self-link" href="#ack"></a></h2>
   <p>The following individuals have contributed to the design of the WebXR DOM Overlay specification:</p>
   <ul>
    <li data-md>
     <p><a href="mailto:bajones@google.com">Brandon Jones</a> (Google)</p>
    <li data-md>
     <p><a href="mailto:nhw@amazon.com">Nell Waliczek</a> (Amazon [Microsoft until 2018])</p>
   </ul>
   <p id="back-to-top" role="navigation"><a href="#toc"><abbr title="Back to Top">↑</abbr></a></p>
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </main>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#beforexrselect">beforexrselect</a><span>, in §2.1</span>
   <li><a href="#feature-descriptor-dom-overlay">dom-overlay</a><span>, in §3.1</span>
   <li><a href="#dom-xrsessioninit-domoverlay">domOverlay</a><span>, in §3.1</span>
   <li><a href="#dom-xrsession-domoverlaystate">domOverlayState</a><span>, in §3.2</span>
   <li><a href="#dom-xrdomoverlaytype-floating">"floating"</a><span>, in §4</span>
   <li><a href="#dom-xrdomoverlaytype-floating">floating</a><span>, in §4</span>
   <li><a href="#dom-globaleventhandlers-onbeforexrselect">onbeforexrselect</a><span>, in §2.1</span>
   <li><a href="#dom-xrdomoverlayinit-root">root</a><span>, in §4</span>
   <li><a href="#dom-xrdomoverlaytype-screen">"screen"</a><span>, in §4</span>
   <li><a href="#dom-xrdomoverlaytype-screen">screen</a><span>, in §4</span>
   <li><a href="#dom-xrdomoverlaystate-type">type</a><span>, in §4</span>
   <li><a href="#dictdef-xrdomoverlayinit">XRDOMOverlayInit</a><span>, in §4</span>
   <li><a href="#dictdef-xrdomoverlaystate">XRDOMOverlayState</a><span>, in §4</span>
   <li><a href="#enumdef-xrdomoverlaytype">XRDOMOverlayType</a><span>, in §4</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-element">
   <a href="https://dom.spec.whatwg.org/#element">https://dom.spec.whatwg.org/#element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element">4. Initialization</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-event-fire">
   <a href="https://dom.spec.whatwg.org/#concept-event-fire">https://dom.spec.whatwg.org/#concept-event-fire</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-event-fire">3.3. XRInputSource</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-event-preventdefault">
   <a href="https://dom.spec.whatwg.org/#dom-event-preventdefault">https://dom.spec.whatwg.org/#dom-event-preventdefault</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-event-preventdefault">2.1. onbeforexrselect</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-event-target">
   <a href="https://dom.spec.whatwg.org/#dom-event-target">https://dom.spec.whatwg.org/#dom-event-target</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-event-target">2.1. onbeforexrselect</a>
    <li><a href="#ref-for-dom-event-target①">3.3. XRInputSource</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-eventhandler">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler">https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-eventhandler">2.1. onbeforexrselect</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-globaleventhandlers">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#globaleventhandlers">https://html.spec.whatwg.org/multipage/webappapis.html#globaleventhandlers</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-globaleventhandlers">2. HTML API Integration</a>
    <li><a href="#ref-for-globaleventhandlers①">2.1. onbeforexrselect</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-htmliframeelement">
   <a href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#htmliframeelement">https://html.spec.whatwg.org/multipage/iframe-embed-object.html#htmliframeelement</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-htmliframeelement">5. Event handling for cross-origin content</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-window">
   <a href="https://html.spec.whatwg.org/multipage/window-object.html#window">https://html.spec.whatwg.org/multipage/window-object.html#window</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-window">3.2. XRSession</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-queue-a-task">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task">https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-queue-a-task">3.3. XRInputSource</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-rendering-opportunity">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#rendering-opportunity">https://html.spec.whatwg.org/multipage/webappapis.html#rendering-opportunity</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-rendering-opportunity">3.2. XRSession</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-animationframeprovider-requestanimationframe">
   <a href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-animationframeprovider-requestanimationframe">https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-animationframeprovider-requestanimationframe</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-animationframeprovider-requestanimationframe">3.2. XRSession</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-topmost-event-target">
   <a href="https://w3c.github.io/uievents/#topmost-event-target">https://w3c.github.io/uievents/#topmost-event-target</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-topmost-event-target">2.1. onbeforexrselect</a>
    <li><a href="#ref-for-topmost-event-target①">3.3. XRInputSource</a>
    <li><a href="#ref-for-topmost-event-target②">5. Event handling for cross-origin content</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-notsupportederror">
   <a href="https://heycam.github.io/webidl/#notsupportederror">https://heycam.github.io/webidl/#notsupportederror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-notsupportederror">3.1. XRSessionInit</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[DOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-element" style="color:initial">Element</span>
     <li><span class="dfn-paneled" id="term-for-concept-event-fire" style="color:initial">fire an event</span>
     <li><span class="dfn-paneled" id="term-for-dom-event-preventdefault" style="color:initial">preventDefault()</span>
     <li><span class="dfn-paneled" id="term-for-dom-event-target" style="color:initial">target</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-eventhandler" style="color:initial">EventHandler</span>
     <li><span class="dfn-paneled" id="term-for-globaleventhandlers" style="color:initial">GlobalEventHandlers</span>
     <li><span class="dfn-paneled" id="term-for-htmliframeelement" style="color:initial">HTMLIFrameElement</span>
     <li><span class="dfn-paneled" id="term-for-window" style="color:initial">Window</span>
     <li><span class="dfn-paneled" id="term-for-queue-a-task" style="color:initial">queue a task</span>
     <li><span class="dfn-paneled" id="term-for-rendering-opportunity" style="color:initial">rendering opportunity</span>
     <li><span class="dfn-paneled" id="term-for-dom-animationframeprovider-requestanimationframe" style="color:initial">requestAnimationFrame(callback)</span>
    </ul>
   <li>
    <a data-link-type="biblio">[uievents]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-topmost-event-target" style="color:initial">topmost event target</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WebIDL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-notsupportederror" style="color:initial">NotSupportedError</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-dom">[DOM]
   <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/">DOM Standard</a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-uievents">[UIEVENTS]
   <dd>Gary Kacmarcik; Travis Leithead; Doug Schepers. <a href="https://www.w3.org/TR/uievents/">UI Events</a>. 30 May 2019. WD. URL: <a href="https://www.w3.org/TR/uievents/">https://www.w3.org/TR/uievents/</a>
   <dt id="biblio-webidl">[WebIDL]
   <dd>Boris Zbarsky. <a href="https://heycam.github.io/webidl/">Web IDL</a>. 15 December 2016. ED. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <c- b>mixin</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/webappapis.html#globaleventhandlers" id="ref-for-globaleventhandlers①①"><c- g>GlobalEventHandlers</c-></a> {
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler①"><c- n>EventHandler</c-></a> <a data-type="EventHandler" href="#dom-globaleventhandlers-onbeforexrselect"><code><c- g>onbeforexrselect</c-></code></a>;
};

<c- b>partial</c-> <c- b>dictionary</c-> <a class="idl-code" data-link-type="dictionary"><c- g>XRSessionInit</c-></a> {
  <a class="n" data-link-type="idl-name" href="#dictdef-xrdomoverlayinit" id="ref-for-dictdef-xrdomoverlayinit①"><c- n>XRDOMOverlayInit</c-></a>? <a data-type="XRDOMOverlayInit? " href="#dom-xrsessioninit-domoverlay"><code><c- g>domOverlay</c-></code></a>;
};

<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface"><c- g>XRSession</c-></a> {
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#dictdef-xrdomoverlaystate" id="ref-for-dictdef-xrdomoverlaystate①"><c- n>XRDOMOverlayState</c-></a>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="XRDOMOverlayState?" href="#dom-xrsession-domoverlaystate" id="ref-for-dom-xrsession-domoverlaystate④"><c- g>domOverlayState</c-></a>;
};

<c- b>dictionary</c-> <a href="#dictdef-xrdomoverlayinit"><code><c- g>XRDOMOverlayInit</c-></code></a> {
  <c- b>required</c-> <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#element" id="ref-for-element①"><c- n>Element</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="Element " href="#dom-xrdomoverlayinit-root" id="ref-for-dom-xrdomoverlayinit-root①①"><c- g>root</c-></a>;
};

<c- b>enum</c-> <a href="#enumdef-xrdomoverlaytype"><code><c- g>XRDOMOverlayType</c-></code></a> {
  <a class="idl-code" data-link-type="enum-value" href="#dom-xrdomoverlaytype-screen" id="ref-for-dom-xrdomoverlaytype-screen②"><c- s>"screen"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-xrdomoverlaytype-floating" id="ref-for-dom-xrdomoverlaytype-floating①"><c- s>"floating"</c-></a>
};

<c- b>dictionary</c-> <a href="#dictdef-xrdomoverlaystate"><code><c- g>XRDOMOverlayState</c-></code></a> {
  <a class="n" data-link-type="idl-name" href="#enumdef-xrdomoverlaytype" id="ref-for-enumdef-xrdomoverlaytype①"><c- n>XRDOMOverlayType</c-></a> <a data-type="XRDOMOverlayType " href="#dom-xrdomoverlaystate-type"><code><c- g>type</c-></code></a>; 
};

</pre>
  <aside class="dfn-panel" data-for="beforexrselect">
   <b><a href="#beforexrselect">#beforexrselect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-beforexrselect">1.1. Overview</a>
    <li><a href="#ref-for-beforexrselect①">2.1. onbeforexrselect</a> <a href="#ref-for-beforexrselect②">(2)</a> <a href="#ref-for-beforexrselect③">(3)</a>
    <li><a href="#ref-for-beforexrselect④">3.3. XRInputSource</a> <a href="#ref-for-beforexrselect⑤">(2)</a> <a href="#ref-for-beforexrselect⑥">(3)</a>
    <li><a href="#ref-for-beforexrselect⑦">5. Event handling for cross-origin content</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="feature-descriptor-dom-overlay">
   <b><a href="#feature-descriptor-dom-overlay">#feature-descriptor-dom-overlay</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-feature-descriptor-dom-overlay">3.2. XRSession</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-xrsessioninit-domoverlay">
   <b><a href="#dom-xrsessioninit-domoverlay">#dom-xrsessioninit-domoverlay</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-xrsessioninit-domoverlay">3.1. XRSessionInit</a> <a href="#ref-for-dom-xrsessioninit-domoverlay①">(2)</a>
    <li><a href="#ref-for-dom-xrsessioninit-domoverlay②">4. Initialization</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-xrsession-domoverlaystate">
   <b><a href="#dom-xrsession-domoverlaystate">#dom-xrsession-domoverlaystate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-xrsession-domoverlaystate">3.2. XRSession</a> <a href="#ref-for-dom-xrsession-domoverlaystate①">(2)</a> <a href="#ref-for-dom-xrsession-domoverlaystate②">(3)</a>
    <li><a href="#ref-for-dom-xrsession-domoverlaystate③">4. Initialization</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-xrdomoverlayinit">
   <b><a href="#dictdef-xrdomoverlayinit">#dictdef-xrdomoverlayinit</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-xrdomoverlayinit">3.1. XRSessionInit</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-xrdomoverlayinit-root">
   <b><a href="#dom-xrdomoverlayinit-root">#dom-xrdomoverlayinit-root</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-xrdomoverlayinit-root">3.3. XRInputSource</a>
    <li><a href="#ref-for-dom-xrdomoverlayinit-root①">4. Initialization</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="enumdef-xrdomoverlaytype">
   <b><a href="#enumdef-xrdomoverlaytype">#enumdef-xrdomoverlaytype</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-enumdef-xrdomoverlaytype">4. Initialization</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-xrdomoverlaystate">
   <b><a href="#dictdef-xrdomoverlaystate">#dictdef-xrdomoverlaystate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-xrdomoverlaystate">3.2. XRSession</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-xrdomoverlaytype-screen">
   <b><a href="#dom-xrdomoverlaytype-screen">#dom-xrdomoverlaytype-screen</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-xrdomoverlaytype-screen">4. Initialization</a>
    <li><a href="#ref-for-dom-xrdomoverlaytype-screen①">5. Event handling for cross-origin content</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-xrdomoverlaytype-floating">
   <b><a href="#dom-xrdomoverlaytype-floating">#dom-xrdomoverlaytype-floating</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-xrdomoverlaytype-floating">4. Initialization</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>